<template>
  <nut-input v-model="selectedMerName" placeholder="请选择商户/门店" readonly @click="showPicker = true"
    input-class="li-login-ipt ovhide" placeholder-class="li-login-iptpl" />
  <nut-popup v-model:visible="showPicker" position="bottom" safe-area-inset-bottom>
    <nut-picker v-model="selectedMer" :columns="merList" title="商户/门店" :field-names="{
        text: 'name',
        value: 'id',
      }" @confirm="onConfirm" @cancel="showPicker = false" />
  </nut-popup>
</template>

<script lang="ts" setup>
import mcht from '@/api/mcht'
import { useAuthStore } from '@/store'

const { openid } = storeToRefs(useAuthStore())
const model = defineModel({ type: String })
const type = defineModel('type', { type: String })
const merList = ref([])
const selectedMer = ref([])
const selectedMerName = ref('')
const showPicker = ref(false)
function onConfirm({ selectedValue }: { selectedValue: (string | number)[] }) {
  showPicker.value = false
  const item = merList.value.find((x: Option) => x.id === selectedValue[0])
  if (item) {
    selectedMerName.value = item.name
    model.value = selectedValue[0]
    type.value = item.type
  }
}
async function getList (phoneNumber: string) {
  const { data } = await mcht.getMerchantList({
    phoneNumber,
    openid: openid.value,
  })
  if (data.status === 'success') {
    merList.value = data.data.merList
    if (merList.value.length > 0) {
      model.value = merList.value[0].id
      type.value = merList.value[0].type
      selectedMer.value = [merList.value[0].id]
      selectedMerName.value = merList.value[0].name
    }
  }
}

defineExpose({
  getList
})
</script>

<style lang="sass" scoped>
:deep(.nut-cell-group__wrap)
  border-radius: 0!important
  box-shadow: none

:deep(.nut-cell-group__wrap .nut-cell)
  min-height: 100rpx
  background-color: #f8f8f8
  margin-bottom: 30rpx
  border-radius: 50rpx!important

:deep(.nut-form-item__body)
  justify-content: center

:deep(.li-login-ipt)
  color: #333

:deep(.li-login-iptpl)
  color: #d6d6d6

.li-login-ipt-btn
  color: #2196F3!important

.li-login-ipt-btndis
  color: #BBDEFB!important
</style>